/**
 * 图片查看器页面
 * 使用路由跳转的方式查看大图
 */

import React, {useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  useColorScheme,
  Dimensions,
  ActivityIndicator,
  Alert,
} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';

interface ImageViewerProps {
  imageUrl: string;
  onBack: () => void;
}

const ImageViewer: React.FC<ImageViewerProps> = ({imageUrl, onBack}) => {
  const [imageLoading, setImageLoading] = useState(true);
  const [imageError, setImageError] = useState(false);
  const isDarkMode = useColorScheme() === 'dark';
  const screenWidth = '100%';
  const screenHeight = '100%';

  console.log('ImageViewer - imageUrl:', imageUrl);
  console.log('ImageViewer - screenWidth:', screenWidth, 'screenHeight:', screenHeight);

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const contentStyle = {
    backgroundColor: isDarkMode ? Colors.black : Colors.white,
  };

  return (
    <View style={[styles.container, backgroundStyle]}>
      {/* 头部导航 */}
      <View style={styles.header}>
        <TouchableOpacity style={styles.backButton} onPress={onBack}>
          <Text style={styles.backButtonText}>← 返回</Text>
        </TouchableOpacity>
        <Text style={[styles.headerTitle, {color: isDarkMode ? Colors.white : Colors.black}]}>
          图片查看
        </Text>
        <View style={styles.placeholder} />
      </View>

      {/* 图片内容 */}
      <View style={[styles.imageContainer, contentStyle]}>
        {imageLoading && (
          <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color="#007AFF" />
            <Text style={[styles.loadingText, {color: isDarkMode ? Colors.white : Colors.black}]}>
              正在加载图片...
            </Text>
          </View>
        )}
        
        {imageError ? (
          <View style={styles.errorContainer}>
            <Text style={[styles.errorText, {color: isDarkMode ? Colors.white : Colors.black}]}>
              ❌ 图片加载失败
            </Text>
            <Text style={[styles.errorSubText, {color: isDarkMode ? Colors.light : Colors.dark}]}>
              请检查网络连接或图片链接
            </Text>
            <TouchableOpacity style={styles.retryButton} onPress={() => {
              setImageError(false);
              setImageLoading(true);
            }}>
              <Text style={styles.retryButtonText}>重试</Text>
            </TouchableOpacity>
          </View>
        ) : (
          <Image
            source={{uri: imageUrl}}
            style={[styles.fullScreenImage, {
              width: screenWidth ,
              height: screenHeight ,
              maxWidth: screenWidth ,
              maxHeight: screenHeight ,
            }]}
            resizeMode="contain"
            onError={(error) => {
              console.log('Image load error:', error);
              setImageLoading(false);
              setImageError(true);
            }}
            onLoad={() => {
              console.log('Image loaded successfully:', imageUrl);
              setImageLoading(false);
              setImageError(false);
            }}
          />
        )}
      </View>

      {/* 底部信息 */}
      <View style={[styles.footer, contentStyle]}>
        <Text style={[styles.imageUrl, {color: isDarkMode ? Colors.light : Colors.dark}]}>
          {imageUrl}
        </Text>
        <TouchableOpacity style={styles.closeButton} onPress={onBack}>
          <Text style={styles.closeButtonText}>关闭</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingTop: 50,
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#E0E0E0',
  },
  backButton: {
    padding: 8,
  },
  backButtonText: {
    fontSize: 16,
    color: '#007AFF',
    fontWeight: '600',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  placeholder: {
    width: 60, // 占位符，保持标题居中
  },
  imageContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    minHeight: 400, // 确保容器有最小高度
  },
  fullScreenImage: {
    width: '100%',
    height: '100%',
    maxWidth: '100%',
    maxHeight: '100%',
  },
  loadingContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  loadingText: {
    marginTop: 16,
    fontSize: 16,
  },
  errorContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  errorText: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  errorSubText: {
    fontSize: 14,
    textAlign: 'center',
    marginBottom: 20,
  },
  retryButton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
  },
  retryButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
  footer: {
    padding: 20,
    borderTopWidth: 1,
    borderTopColor: '#E0E0E0',
  },
  imageUrl: {
    fontSize: 12,
    textAlign: 'center',
    marginBottom: 10,
    opacity: 0.7,
  },
  closeButton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 30,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  closeButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
});

export default ImageViewer;
